<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>上传图片</title>
	<style>
		* {
			font-family: "microsoft yahei";
		}
	</style>
</head>

<body>
	<p>上传图片</p>
	<hr />
	<form id="form" method="post" enctype="multipart/form-data" onsubmit="return false;" onchange="upload()">
		<input id="file" type="file" name="file" />
	</form>
	<div id="board" style="width:500px;height:400px;margin-top: 8px">
		<!-- <img id="img" style="width:100%;height:100%;cursor: zoom-in;" src=""> -->
		<img id="img" style="height:100%;cursor: zoom-in;" src="">
	</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script>
	const form = document.getElementById("form");
	const file = document.getElementById("file");
	const board = document.getElementById('board');
	const img = document.getElementById("img");
	function upload() {
		const formData = new FormData(form);
		formData.append('name', 'msz');
		console.log(formData);
		$.ajax({
			type: 'post',
			url: './upload',
			data: formData,
			async: true,
			cache: false,
			contentType: false,
			processData: false,
			success(e) {
				console.log(e);
				img.src = e;
			}
		});
		file.value = '';
	}
</script>

</html>